<!DOCTYPE html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../common.jsp"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html lang="en">
    <head>        
    	<base href="<%=basePath%>">
        <!-- META SECTION -->
        <title>${htmlTitle}</title>            
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <!-- END META SECTION -->
        
        <!-- CSS INCLUDE -->        
        <link rel="stylesheet" type="text/css" id="theme" href="static/css/theme-default.css"/>
        <!-- EOF CSS INCLUDE -->      
        
        <link href="static/css/style.css" rel="stylesheet" type="text/css" media="all" />
		<link rel="stylesheet" href="static/css/jquery/lrtk.css" type="text/css" media="" />



		<script src="static/js/jquery/mosaic.1.0.1.js"></script>
		<script src="static/js/jquery/lrtk.js"></script>     
		
		<style type="text/css">
			.input-group {
			    min-width: 150px;
			}
		</style>
		                         
    </head>
    <body>
    
    	<%@include file="../header.jsp"%>
    
        <!-- START PAGE CONTAINER -->
        <div class="page-container">
            
            <!-- START PAGE SIDEBAR -->
            	<%@include file="../left.jsp"%>
            <!-- END PAGE SIDEBAR -->
            
            <!-- PAGE CONTENT -->
            <div class="page-content">

                <!-- START BREADCRUMB -->
                <!-- END BREADCRUMB -->                       
                
                <!-- PAGE CONTENT WRAPPER -->
                <div class="page-content-wrap">
					<div class="row">
						<div class="col-md-12" style="padding-top: 10px;">
							<!-- START SEARCH -->
							<div class="panel panel-default">
								<div class="panel-body">
									<div class="col-md-12" style="padding-left: 0px;">
										<div class="col-md-3">
											<div class="pull-left" style="line-height:30px;">城市</div>
	                                		<div class="input-group" >
	                                           	<select id="city" name="city" class=" form-control select" value="" onchange="changeCity()" style="min-width: 60px;">
												</select>
		                                    </div>
										</div>
										<div class="col-md-3">
											<div class="pull-left" style="line-height:30px;">区域</div>
	                                		<div class="input-group" >
	                                           	<select id="area" name="area" class=" form-control select" value="">
												</select>
		                                    </div>
										</div>
										<div class="col-md-3" >
											<div class="pull-left" style="line-height:30px;">停车场</div>
	                                		<div class="input-group" >
	                                           	<div class="input-group-btn">
	                                                 <input id="park" type="text" class="form-control" value=""/>                                      
	                                            </div>
		                                    </div>
										</div>
										<div class="col-md-3" >
											<button class="btn btn-primary" onclick="search()">
												<span class="fa"></span>查询
											</button>
											<button class="btn btn-primary" onclick="clearCondition()">
												<span class="fa"></span>清空
											</button>
											<button class="btn btn-primary" onclick="addPark()">
													<span class="fa"></span>添加
											</button>
										</div>
									</div>
								</div>
							</div>
							<!-- END SEARCH -->
							
							<!-- START SEARCH RESULT -->
							<div class="search-results">
								<!-- START DEFAULT DATATABLE -->
								<div class="panel panel-default">
									<div class="panel-body">
										<table id="tableList" class="table table-hover "
											cellspacing="0" width="100%">
											<thead>
												<tr>
													<th style="width: 10%">
														停车场名称
													</th>
													<th style="width: 10%">
														所属物业
													</th>
													<th style="width: 10%">
														类型
													</th>
													<th style="width: 10%">
														价格(元/小时)
													</th>
													<th style="width: 10%">
														空位数
													</th>
													<th style="width: 10%">
														车位总数
													</th>
													<th style="width: 10%">
														免费时长
													</th>
													<th style="width: 10%">
														添加日期
													</th>
													<th style="width: 20%">
														操作
													</th>
												</tr>
											</thead>
										</table>
									</div>
								</div>
								<!-- END DEFAULT DATATABLE -->
							</div>
						</div>
					</div>
                </div>
                <!-- END PAGE CONTENT WRAPPER -->                                
            </div>            
            <!-- END PAGE CONTENT -->
        </div>
        <!-- END PAGE CONTAINER -->
        
        <script type="text/javascript">
        	var table;
        	$(document).ready(function() {
        		queryList();
        		initCityOptions();
			});
        	
        	function search()
		 	{
		 		table.ajax.reload();
		 	}
        	
        	function queryList() {
        		table = $('#tableList').DataTable({
					processing :true,
					serverSide :true,
					bSort :false,
					bFilter :false, //过滤功能
					bAutoWidth: false,//自动宽度
					ajax : {
						"url" :ctx + "/vehicle/queryParkList",
						"type" :"POST",
						"data": function(d){
						    return $.extend({}, d, {
						    	"city": $("#city").val(),//encodeURI(encodeURI($("#city").combobox('getValue'),"UTF-8")
							    "area":$("#area").val(),
							    "parkName":$("#park").val()
						      });
						    }
					},
					columns : [
							{
								"data" :"name"
							}, {
								"data" :"estateName"
							}, {
								"mDataProp": "type",
								"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
									if(sData == 1)
									{
										$(nTd).html("室内停车场");
									} else if(sData == 2) {
										$(nTd).html("室外停车场");
									}
					            }		
						    }, {
						    	"data" :"price"
						    }, {
								"data" :"remainParkNum"
							}, {
								"data" :"totalParkNum"
							}, {
								"data" :"freeTime"
							}, {
								"data" :"createdTime"
							}, { 
								"mDataProp": null 
							}
						],
				columnDefs: [
				                {
				                    targets: 8,
				                    render: function (a, b, c, d) {
				                        return "<a class=\"btn btn-info actionBtn\" href=\"javascript:void(0)\" onclick=\"edit(\'" + c.id + "\')\"><i class=\"glyphicon glyphicon-edit icon-white\"></i>修改 </a>"
				                        	+"&nbsp;<a  class=\"btn btn-danger actionBtn\" href=\"javascript:void(0)\" onclick=\"del(\'" + c.id + "\')\">  <i class=\"glyphicon glyphicon-trash icon-white\"></i>删除 </a>";
						                        //+"&nbsp;&nbsp;" 
						                        //+ "<a class=\"btn btn-success actionBtn\" href=\"javascript:void(0)\" onclick=\"promptMsg(\'" + c.id + "\')\"><i class=\"glyphicon glyphicon-zoom-in icon-white\"></i> 提示语 </a>";
				                    }
				                }
				            ],
					"language" : {
						"lengthMenu" :"_MENU_ 条记录每页",
						"zeroRecords" :"没有找到记录",
						"info" :"第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
						"infoEmpty" :"无记录",
						"infoFiltered" :"(从 _MAX_ 条记录过滤)",
						"paginate" : {
							 "first":"首页",  
							 "last":"末页",     
							"previous" :"上一页",
							"next" :"下一页"
						}
					},
					"sPaginationType": "full_numbers"
				});
        	}
        	
        	function initCityOptions() {
        		var url = ctx + '/region/queryCityOptions';
				$.ajax(url, {
				    type: 'post',
				    data: {},
				    success: function(result){
				    	var rtn = JSON.parse(result);
				    	if (rtn.code==1) {
				    		$("#city").html(rtn.options);
					    	$('#city').selectpicker('refresh');
				    	} else {
				    		
				    	}
				    }
				});
        	}
        	
        	function clearCondition()
		 	{
        		$("#city").val("");
            	$('#city').selectpicker('refresh');
            	$("#area").val("");
            	$('#area').selectpicker('refresh');
            	$("#park").val("");
		 	}
        	
        	function addPark() {
        		var menuId = '${currMenuId}';
        		window.location.href = ctx + "/vehicle/editPark?menuId=" + menuId;
        	}
        	
        	function edit(id) {
        		var menuId = '${currMenuId}';
        		window.location.href = ctx + "/vehicle/editPark?id="+id+"&menuId=" + menuId;
        	}
        	
        	function del(id) {
        		$("#deleteId").val(id);
        		$("#deleteModal").modal("show");
        	}
        	
        	function delSubmit() {
        		var id = $("#deleteId").val();
        		var url = ctx + "/vehicle/deletePark";
        		$.post(url, {
        			"id" :id
        		}, function(result) {
        			var rtn = JSON.parse(result);
        			if (rtn.code == 1) {
        				table.ajax.reload();
        				$("#deleteModal").modal("hide");
        			} else {
        				alert(rtn.text);
        			}
        		});
        	}
        	
        	function changeCity() {
        		var city = $("#city").val();
				if(city != ''){
					var url = ctx + '/region/queryAreaOptions';
					$.ajax(url, {
					    type: 'post',
					    data: {city:city},
					    success: function(result){
					    	var rtn = JSON.parse(result);
					    	if (rtn.code==1) {
					    		$("#area").html(rtn.options);
						    	$('#area').selectpicker('refresh');
					    	} else {
					    		
					    	}
					    }
					});
				}else{
					$("#area").html('<option value="">-请选择-</option>');
			    	$('#area').selectpicker('refresh');
				}
        	}
        	
        </script>
        
    </body>
</html>